<title>算法分析2</title>

<div class="page animation-fade">
    <div class="page-header page-header-bordered">
        <h1 class="page-title">算法分析2</h1>
        <div class="page-header-actions" style="padding-top: 20px;">
            <select class="form-control " id="select" name="select" data-plugin="select2"
                    style="width: 200px;display: inline-block">

            </select>
            <button type="button" class="btn btn-icon btn-info collapsed" data-toggle="collapse"
                    data-target="#collapseFilter" aria-expanded="false" aria-controls="collapseFilter">
                <i class="icon fa-filter"></i>
            </button>
        </div>
    </div>

    <div class="page-content">
        <div class="collapse" id="collapseFilter" aria-expanded="true">
            <div class="panel">
                <div class="panel-body">
                    <form class="form-horizontal" id="form">
                        <div class="form-group">
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">运输单价</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="unitPrice" value="1.0">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">产品规格</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="volume" value="1.0">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">车辆载重</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="load" value="100">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">其他费用</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="otherExpenses">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">仓储单价</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="storeUnitPrice">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">占地面积</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="area">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">总月数</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="months" id="months" data-fv-field="standard_name" value="6" placeholder="请输入总月数:6">
                                </div>
                            </div>

                        </div>
                        <div class="form-group"  >
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">商品单价</label>
                                <div class="col-sm-8" >
                                    <input type="text" class="form-control" name="prize" id="prize" data-fv-field="standard_name" value="50" placeholder="请输入商品单价:0.95">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">服务水平</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="costomService" id="costomService" data-fv-field="standard_name" value="0.95" placeholder="请输入服务水平:0.95">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">处理时间</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="dealTime" id="dealTime" data-fv-field="standard_name" value="3" placeholder="请输入处理时间:4">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">持有成本</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="holdCost" id="holdCost" data-fv-field="standard_name" value="50" placeholder="请输入单位库存项目的持有成本:40">
                                </div>
                            </div>
                        </div>
                        <div class="form-group"  >
                            <div class="col-sm-3">
                                <label class="col-sm-4 control-label">订购成本</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="orderCost" id="orderCost" data-fv-field="standard_name" value="40" placeholder="请输入订购成本:30">
                                </div>
                            </div>
                        </div>
                        <div class="form-group"  >
                            <div class="col-sm-1">
                            </div>
                            <div class="col-sm-3">
                                <a class="btn btn-success" onclick="reloadData()"><i class="icon fa-refresh"></i> 刷新
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="row">

            <div class=" col-ms-12 col-xs-12 col-md-9">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title" style="font-size: 5px;background-color: #015e7f;color: #fff">物流网络优化</h3>
                        <div class="panel-actions">
                        </div>
                    </div>
                    <div class="panel-body padding-3 height-500" style="width:100%">
                        <div id="network-supply-algorithm-${uniqueId}" style="height: 100%">

                        </div>
                    </div>
                </div>
            </div>
            <div class=" col-ms-12 col-xs-12 col-md-3">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title" style="font-size: 5px;background-color: #015e7f;color: #fff">物流网络优化</h3>
                        <div class="panel-actions">
                        </div>
                    </div>
                    <div class="panel-body padding-3 height-500" style="width:100%">
                        <div  style="height: 100%">
                            <div id="radios"></div>

                            <div class="form-group">
                                <button type="button" class="btn btn-primary" onclick="selectAll()">开始</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-xs-12 info-panel">
                <div class="widget widget-shadow">
                    <div class="widget-content bg-white padding-20">
                        <button type="button" class="btn btn-floating btn-sm btn-warning">
                            <i class="icon fa-home"></i>
                        </button>
                        <span class="margin-left-15 font-weight-400">分中心</span>
                        <div class="content-text text-center margin-bottom-0">
                            <span id="total" class="font-size-40 font-weight-100">&nbsp;</span>
                            <p class="blue-grey-400 font-weight-100 margin-0">&nbsp</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-xs-12 info-panel">
                <div class="widget widget-shadow">
                    <div class="widget-content bg-white padding-20">
                        <button type="button" class="btn btn-floating btn-sm btn-danger">
                            <i class="icon fa-file-text-o"></i>
                        </button>
                        <span class="margin-left-15 font-weight-400">订单量</span>
                        <div class="content-text text-center margin-bottom-0">
                            <span id="order" class="font-size-40 font-weight-100">&nbsp;</span>
                            <p class="blue-grey-400 font-weight-100 margin-0">&nbsp;</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-xs-12 info-panel">
                <div class="widget widget-shadow">
                    <div class="widget-content bg-white padding-20">
                        <button type="button" class="btn btn-floating btn-sm btn-success">
                            <i class="icon fa-truck"></i>
                        </button>
                        <span class="margin-left-15 font-weight-400">总距离</span>
                        <div class="content-text text-center margin-bottom-0">
                            <span id="distance" class="font-size-40 font-weight-100">&nbsp;</span>
                            <p class="blue-grey-400 font-weight-100 margin-0">所需车辆：<span id="vehicle"> </span>辆</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-xs-12 info-panel">
                <div class="widget widget-shadow">
                    <div class="widget-content bg-white padding-20">
                        <button type="button" class="btn btn-floating btn-sm btn-primary">
                            <i class="icon fa-yen"></i>
                        </button>
                        <span class="margin-left-15 font-weight-400">总成本</span>
                        <div class="content-text text-center margin-bottom-0">
                            <span id="cost" class="font-size-40 font-weight-100">&nbsp;</span>
                            <p class="blue-grey-400 font-weight-100 margin-0">其中租赁成本：<span id="renta"></span></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-ms-12 col-xs-12 col-md-6">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title">各二级配送中心分布情况（含订单量）</h3>
                        <div class="panel-actions">

                        </div>
                    </div>
                    <div class="panel-body padding-3 height-250" id="cost-map">

                    </div>
                </div>
            </div>
            <div class="col-ms-12 col-xs-12 col-md-6">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title">各二级配送中心运输成本</h3>
                        <div class="panel-actions">
                        </div>
                    </div>
                    <div class="panel-body padding-3 height-250" id="cost-bar-one">
                    </div>
                </div>
            </div>
            <div class="col-ms-12 col-xs-12 col-md-6">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title">各二级配送中心运输距离</h3>
                        <div class="panel-actions">
                        </div>
                    </div>
                    <div class="panel-body padding-3 height-250" id="cost-bar-two">
                    </div>
                </div>
            </div>
            <div class="col-ms-12 col-xs-12 col-md-6">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title">各二级配送中心车辆数量占用情况</h3>
                        <div class="panel-actions">
                        </div>
                    </div>
                    <div class="panel-body padding-3 height-250" id="cost-bar-three">
                    </div>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="widget">
                    <div class="widget-content padding-35 bg-white clearfix">
                        <div class="counter counter-md pull-left text-left">
                            <div class="counter-label text-capitalize font-size-10">安全库存水平</div>
                            <div class="counter-number-group">
                                <span class="counter-number" id="safetyStock"></span>
                            </div>
                        </div>
                        <div class="pull-right white">
                            <i class="icon icon-circle icon-2x wb-users bg-blue-600" aria-hidden="true">
                            </i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="widget">
                    <div class="widget-content padding-35 bg-white clearfix">
                        <div class="counter counter-md pull-left text-left">
                            <div class="counter-label text-capitalize font-size-10">一级配送中心再订货点</div>
                            <div class="counter-number-group">
                                <span class="counter-number" id="orderPort"></span>
                            </div>
                        </div>
                        <div class="pull-right white">
                            <i class="icon icon-circle icon-2x wb-unlock bg-red-600" aria-hidden="true">
                            </i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="widget">
                    <div class="widget-content padding-35 bg-white clearfix">
                        <div class="counter counter-md pull-left text-left">
                            <div class="counter-label text-capitalize font-size-10">订货周期内的周转库存</div>
                            <div class="counter-number-group">
                                <span class="counter-number" id="turnoverInventory"></span>
                            </div>
                        </div>
                        <div class="pull-right white">
                            <i class="icon icon-circle icon-2x wb-contract bg-yellow-600" aria-hidden="true">
                            </i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="widget">
                    <div class="widget-content padding-35 bg-white clearfix">
                        <div class="counter counter-md pull-left text-left">
                            <div class="counter-label text-capitalize font-size-10">订货周期内的最大库存</div>
                            <div class="counter-number-group">
                                <span class="counter-number" id="maxInventory"></span>
                            </div>
                        </div>
                        <div class="pull-right white">
                            <i class="icon icon-circle icon-2x wb-camera bg-blue-600" aria-hidden="true">
                            </i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="widget">
                    <div class="widget-content padding-35 bg-white clearfix">
                        <div class="counter counter-md pull-left text-left">
                            <div class="counter-label text-capitalize font-size-10">经济订货批量(EOQ)</div>
                            <div class="counter-number-group">
                                <span class="counter-number" id="eoq"></span>
                            </div>
                        </div>
                        <div class="pull-right white">
                            <i class="icon icon-circle icon-2x wb-home bg-green-600" aria-hidden="true">
                            </i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="widget">
                    <div class="widget-content padding-35 bg-white clearfix">
                        <div class="counter counter-md pull-left text-left">
                            <div class="counter-label text-capitalize font-size-10">订货周期商品占用资金</div>
                            <div class="counter-number-group">
                                <span class="counter-number" id="moneyLevel"></span>
                            </div>
                        </div>
                        <div class="pull-right white">
                            <i class="icon icon-circle icon-2x wb-home bg-teal-600" aria-hidden="true">
                            </i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="widget">
                    <div class="widget-content padding-35 bg-white clearfix">
                        <div class="counter counter-md pull-left text-left">
                            <div class="counter-label text-capitalize font-size-10">配送中心月平均库存</div>
                            <div class="counter-number-group">
                                <span class="counter-number" id="avgInventory"></span>
                            </div>
                        </div>
                        <div class="pull-right white">
                            <i class="icon icon-circle icon-2x wb-order bg-indigo-600" aria-hidden="true">
                            </i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="widget">
                    <div class="widget-content padding-35 bg-white clearfix">
                        <div class="counter counter-md pull-left text-left">
                            <div class="counter-label text-capitalize font-size-10">到配送中心总订单量</div>
                            <div class="counter-number-group">
                                <span class="counter-number" id="toSecondaryCenter"></span>
                            </div>
                        </div>
                        <div class="pull-right white">
                            <i class="icon icon-circle icon-2x wb-random bg-yellow-600" aria-hidden="true">
                            </i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-sm-6 col-xs-12 info-panel">
                <div class="widget widget-shadow">
                    <div class="widget-content bg-white padding-20">
                        <button type="button" class="btn btn-floating btn-sm btn-warning">
                            <i class="icon fa-home"></i>
                        </button>
                        <span class="margin-left-15 font-weight-400">一级中心</span>
                        <div class="content-text text-center margin-bottom-0">
                            <span id="totalAll" class="font-size-40 font-weight-100">&nbsp;</span>
                            <p class="blue-grey-400 font-weight-100 margin-0">&nbsp</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-xs-12 info-panel">
                <div class="widget widget-shadow">
                    <div class="widget-content bg-white padding-20">
                        <button type="button" class="btn btn-floating btn-sm btn-danger">
                            <i class="icon fa-file-text-o"></i>
                        </button>
                        <span class="margin-left-15 font-weight-400">订单量</span>
                        <div class="content-text text-center margin-bottom-0">
                            <span id="orderAll" class="font-size-40 font-weight-100">&nbsp;</span>
                            <p class="blue-grey-400 font-weight-100 margin-0">&nbsp;</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-xs-12 info-panel">
                <div class="widget widget-shadow">
                    <div class="widget-content bg-white padding-20">
                        <button type="button" class="btn btn-floating btn-sm btn-success">
                            <i class="icon fa-truck"></i>
                        </button>
                        <span class="margin-left-15 font-weight-400">总距离</span>
                        <div class="content-text text-center margin-bottom-0">
                            <span id="distanceAll" class="font-size-40 font-weight-100">&nbsp;</span>
                            <p class="blue-grey-400 font-weight-100 margin-0">所需车辆：<span id="vehicleAll"> </span>辆</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-xs-12 info-panel">
                <div class="widget widget-shadow">
                    <div class="widget-content bg-white padding-20">
                        <button type="button" class="btn btn-floating btn-sm btn-primary">
                            <i class="icon fa-yen"></i>
                        </button>
                        <span class="margin-left-15 font-weight-400">总成本</span>
                        <div class="content-text text-center margin-bottom-0">
                            <span id="costAll" class="font-size-40 font-weight-100">&nbsp;</span>
                            <p class="blue-grey-400 font-weight-100 margin-0">其中租赁成本：<span id="rentaAll"></span></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-ms-12 col-xs-12 col-md-6">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title">各一级配送中心分布情况（含订单量）</h3>
                        <div class="panel-actions">

                        </div>
                    </div>
                    <div class="panel-body padding-3 height-250" id="cost-map-All">

                    </div>
                </div>
            </div>
            <div class="col-ms-12 col-xs-12 col-md-6">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title">各一级配送中心运输成本</h3>
                        <div class="panel-actions">
                        </div>
                    </div>
                    <div class="panel-body padding-3 height-250" id="cost-bar-one-All">
                    </div>
                </div>
            </div>
            <div class="col-ms-12 col-xs-12 col-md-6">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title">各一级配送中心运输距离</h3>
                        <div class="panel-actions">
                        </div>
                    </div>
                    <div class="panel-body padding-3 height-250" id="cost-bar-two-All">
                    </div>
                </div>
            </div>
            <div class="col-ms-12 col-xs-12 col-md-6">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title">各一级配送中心车辆数量占用情况</h3>
                        <div class="panel-actions">
                        </div>
                    </div>
                    <div class="panel-body padding-3 height-250" id="cost-bar-three-All">
                    </div>
                </div>
            </div>
            <div class="col-ms-12 col-xs-12 col-md-6">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title">订货周期内库存商品占用资金水平</h3>
                        <div class="panel-actions">
                        </div>
                    </div>
                    <div class="panel-body padding-3 height-500" id="cost-bar-four-All">
                    </div>
                </div>
            </div>
            <div class="col-ms-12 col-xs-12 col-md-6">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title">各一级配送中心1个月的平均库存分布</h3>
                        <div class="panel-actions">
                        </div>
                    </div>
                    <div class="panel-body padding-3 height-500" id="cost-bar-five-All">
                    </div>
                </div>
            </div>

        </div>





    </div>
</div>

<script src="/static/public/vendor/matchheight/jquery.matchHeight.min.js"></script>
<script type="text/javascript">
    function initAll() {
        window.cost_map = echarts.init(document.getElementById('cost-map'), 'macarons');
        window.cost_bar_one = echarts.init(document.getElementById('cost-bar-one'), 'macarons');
        window.cost_bar_two = echarts.init(document.getElementById('cost-bar-two'), 'macarons');
        window.cost_bar_three = echarts.init(document.getElementById('cost-bar-three'), 'macarons');
        initTransportMap();
        initTransportbarOne();
        initTransportbarTwo();
        initTransportbarThree();

        window.cost_map_all = echarts.init(document.getElementById('cost-map-All'), 'macarons');
        window.cost_bar_one_all = echarts.init(document.getElementById('cost-bar-one-All'), 'macarons');
        window.cost_bar_two_all = echarts.init(document.getElementById('cost-bar-two-All'), 'macarons');
        window.cost_bar_three_all = echarts.init(document.getElementById('cost-bar-three-All'), 'macarons');
        window.cost_bar_four_all = echarts.init(document.getElementById('cost-bar-four-All'), 'macarons');
        window.cost_bar_five_all = echarts.init(document.getElementById('cost-bar-five-All'), 'macarons');

        initAllMap();
        initAllbarOne();
        initAllbarTwo();
        initAllbarThree();
        initAllbarFour();
        initAllbarFive();
    }
    function initAllMap() {
        cost_map_all.setOption({
            backgroundColor: '#ffffff',
            title: {
                text: '全国主要城市空气质量',
                subtext: 'data from PM25.in',
                sublink: 'http://www.pm25.in',
                left: 'center',
                textStyle: {
                    color: '#fff'
                },
                show: false
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                y: 'bottom',
                x: 'right',
                data: ['pm2.5'],
                textStyle: {
                    color: '#fff'
                }
            },
            geo: {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            },
            series: [
                {
                    name: '订单量',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: [],
                    symbolSize: function (val) {
                        return val[2] / 1500;
                    },
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#ddb926'
                        }
                    }
                }
            ]
        });
    }

    function initAllbarOne() {
        cost_bar_one_all.setOption({
            title: {
                text: '某地区蒸发量和降水量',
                subtext: '纯属虚构',
                show: false
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    axisLabel:{
                        show:true,
                        interval:0,
                        rotate: 45,//倾斜度 -90 至 90 默认为0
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value){
                            var var1=value*1;
                            return var1;
                        },
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    splitLine:{
                        show:true
                    },
                    splitArea: {
                        show:true,
                        areaStyle: {
                            color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                        }
                    },
                }
            ],
            grid: {
                left: '3%',
                right: '3%',
                bottom: '12%',
                top:'5%',
                containLabel: true
            },
            series: [
                {
                    name: '成本',
                    type: 'bar',
                    data: [],
                    itemStyle: {
                        normal: {
                            //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                            color: '#4472c4',
                            //以下为是否显示，显示位置和显示格式的设置了
                        }},
                }
            ]
        });
    }

    function initAllbarTwo() {
        cost_bar_two_all.setOption({
            title: {
                text: '某地区蒸发量和降水量',
                subtext: '纯属虚构',
                show: false
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    axisLabel:{
                        show:true,
                        interval:0,
                        rotate: 45,//倾斜度 -90 至 90 默认为0
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value){
                            var var1=value*1;
                            return var1;
                        },
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    splitLine:{
                        show:true
                    },
                    splitArea: {
                        show:true,
                        areaStyle: {
                            color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                        }
                    },
                }
            ],
            grid: {
                left: '3%',
                right: '3%',
                bottom: '12%',
                top:'5%',
                containLabel: true
            },
            series: [
                {
                    name: '距离',
                    type: 'bar',
                    data: [],
                    itemStyle: {
                        normal: {
                            //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                            color: '#c9eee7',
                            //以下为是否显示，显示位置和显示格式的设置了
                        }},
                }
            ]
        });
    }

    function initAllbarThree() {
        cost_bar_three_all.setOption({
            title: {
                text: '某地区蒸发量和降水量',
                subtext: '纯属虚构',
                show: false
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    axisLabel:{
                        show:true,
                        interval:0,
                        rotate: 45,//倾斜度 -90 至 90 默认为0
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#999'
                        }
                    }
                }
            ],
            grid: {
                left: '3%',
                right: '3%',
                bottom: '12%',
                top:'5%',
                containLabel: true
            },
            series: [
                {
                    name: '车辆数目',
                    type: 'bar',
                    data: []
                }
            ]
        });
    }
    function initAllbarFour() {
        cost_bar_four_all.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#998492'
                    }
                },
            },
            grid:{
                left: '3%',
                right: '3%',
                bottom: '5%',
                top:'5%',
                containLabel: true
            },
            xAxis:{
                type: 'value',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },

                splitLine:{
                    show:true
                },
                axisLabel: {
                    formatter: function(value){
                        var var1=value*1;
                        return var1;
                    },
                    textStyle:{
                        color:"#595959"
                    }
                },
                splitArea: {
                    show: true,
                    areaStyle: {
                        color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                    }
                },
            },
            yAxis: [
                {
                    type: 'value',
                    //    name: '资金量',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value){
                            var var1=value*1;
                            return var1;
                        },
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    splitLine:{
                        show:true
                    },
                    splitArea: {
                        show:true,
                        areaStyle: {
                            color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                        }
                    },
                },
                {
                    type: 'value',
                    //   name: '订货频次',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value){
                            var var1=value*1;
                            return var1;
                        },
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                        }
                    },
                }
            ],
            series: [
                {
                    type: 'bar',
                    data: [],
                    itemStyle: {
                        normal: {
                            //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                            color:'#0fa99d',
                            label: {
                                show: true,
                                position: 'insideRight',//数据在中间显示
                            }
                            //以下为是否显示，显示位置和显示格式的设置了
                        }}
                },
                {
                    //  name:'资金量',
                    type:'line',
                    data:[],
                    //  barWidth:20,
                    itemStyle: {
                        normal: {
                            //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                            color: '#2350a9'
                        },
                        //以下为是否显示，显示位置和显示格式的设置了
                    }
                }
            ]
        });
    }
    function initAllbarFive() {
        cost_bar_five_all.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            grid:{
                left: '3%',
                right: '3%',
                bottom: '5%',
                top:'5%',
                containLabel: true
            },
            xAxis:  {
                type: 'value',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },

                splitLine:{
                    show:true
                },
                axisLabel: {
                    formatter: function(value){
                        var var1=value*1;
                        return var1;
                    },
                    textStyle:{
                        color:"#595959"
                    }
                },
                splitArea: {
                    show: true,
                    areaStyle: {
                        color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                    }
                },
            },
            yAxis: [ {
                type: 'value',
                // name: '订单量',
                data:[],
                axisLabel:{
                    show:true,
                    textStyle:{
                        color:"#595959"
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
            },
                {
                    type: 'value',
                    //   name: '订货频次',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value){
                            var var1=value*1;
                            return var1;
                        },
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                        }
                    },
                }
            ],

            series: [
                {
                    //  name:'订单量',
                    type:'line',
                    data:[],
                    itemStyle: {
                        normal: {
                            //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                            color: '#4472c4',
                            //以下为是否显示，显示位置和显示格式的设置了
                        }},
                    areaStyle: {normal: {
                        color:"#d9d9d9"
                    }},
                },
                {
                    //  name:'订货频次',
                    type: 'bar',
                    data: [],
                    itemStyle: {
                        normal: {
                            //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                            color:'#0fa99d',
                            label: {
                                show: true,
                                position: 'insideRight',//数据在中间显示
                            }
                            //以下为是否显示，显示位置和显示格式的设置了
                        }}

                }
            ]
        });
    }
    function initTransportMap() {
        cost_map.setOption({
            backgroundColor: '#ffffff',
            title: {
                text: '全国主要城市空气质量',
                subtext: 'data from PM25.in',
                sublink: 'http://www.pm25.in',
                left: 'center',
                textStyle: {
                    color: '#fff'
                },
                show: false
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                y: 'bottom',
                x: 'right',
                data: ['pm2.5'],
                textStyle: {
                    color: '#fff'
                }
            },
            geo: {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            },
            series: [
                {
                    name: '订单量',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: [],
                    symbolSize: function (val) {
                        return val[2] / 30;
                    },
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#ddb926'
                        }
                    }
                }
            ]
        });
    }
    function initTransportbarOne() {
        cost_bar_one.setOption({
            title: {
                text: '某地区蒸发量和降水量',
                subtext: '纯属虚构',
                show: false
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    axisLabel:{
                        show:true,
                        interval:0,
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value){
                            var var1=value*1;
                            return var1;
                        },
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    splitLine:{
                        show:true
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                        }
                    },
                }
            ],
            grid: {
                left: '3%',
                right: '3%',
                bottom: '5%',
                top:'5%',
                containLabel: true
            },
            series: [
                {
                    name: '成本',
                    type: 'bar',
                    data: [],
                    barWidth:20,
                }
            ]
        });
    }
    function initTransportbarTwo() {
        cost_bar_two.setOption({
            title: {
                text: '某地区蒸发量和降水量',
                subtext: '纯属虚构',
                show: false
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    axisLabel:{
                        show:true,
                        interval:0,
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value){
                            var var1=value*1;
                            return var1;
                        },
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    splitLine:{
                        show:true
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                        }
                    },
                }
            ],
            grid: {
                left: '3%',
                right: '3%',
                bottom: '5%',
                top:'5%',
                containLabel: true
            },
            series: [
                {
                    name: '距离',
                    type: 'bar',
                    data: [],
                    barWidth:20,
                }
            ]
        });
    }
    function initTransportbarThree() {
        cost_bar_three.setOption({
            title: {
                text: '某地区蒸发量和降水量',
                subtext: '纯属虚构',
                show: false
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    axisLabel:{
                        show:true,
                        interval:0,
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value){
                            var var1=value*1;
                            return var1;
                        },
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    splitLine:{
                        show:true
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                        }
                    },
                }
            ],
            grid: {
                left: '3%',
                right: '3%',
                bottom: '5%',
                top:'5%',
                containLabel: true
            },
            series: [
                {
                    name: '车辆数目',
                    type: 'bar',
                    data: [],
                    barWidth:20,
                }
            ]
        });
    }
    function transportInventory(d) {
        $("#totalAll").html(d.data.length);
        $("#orderAll").html(d.totalOrder);
        $("#distanceAll").html(d.totalDistance);
        $("#costAll").html("&yen;" + d.totalCost);
        $("#vehicleAll").html(d.totalVehicle);
        $("#rentaAll").html("&yen;" + d.renta);
        //更新数据
        var option = cost_map_all.getOption();
        var mapData = [];
        var xData = [];
        var costData = [];
        var distanceData = [];
        var vehicleData = [];
        $.each(d.data, function (index, row) {
            mapData.push({name: row.name, value: [row.coordinateX, row.coordinateY, row.order]});
            xData.push(row.name);
            costData.push(row.cost);
            distanceData.push(row.distance);
            vehicleData.push(row.vehicle);
        });
        option.series[0].data = mapData;
        cost_map_all.setOption(option);

        option = cost_bar_one_all.getOption();
        option.xAxis = [
            {
                type: 'category',
                data: xData
            }
        ];
        option.series[0].data = costData;
        cost_bar_one_all.setOption(option);

        option = cost_bar_two_all.getOption();
        option.xAxis = [
            {
                type: 'category',
                data: xData
            }
        ];
        option.series[0].data = distanceData;
        cost_bar_two_all.setOption(option);

        option = cost_bar_three_all.getOption();
        option.xAxis = [
            {
                type: 'category',
                data: xData
            }
        ];
        option.series[0].data = vehicleData;
        cost_bar_three_all.setOption(option);

        option = cost_bar_four_all.getOption();
        option.yAxis = [
            {
                type: 'category',
                data: d.data.x1,
            }
        ];
        option.series[0].data=d.data.x2;
        //  option.series[1].data=d.data.x2;
        cost_bar_four_all.setOption(option);

        option = cost_bar_five_all.getOption();
        option.yAxis = [
            {
                type: 'category',
                data: d.data.x1,
            }
        ];
        //  option.series[0].data=d.data.x3;
        option.series[1].data=d.data.x3;
        cost_bar_five_all.setOption(option);
    }
    $(function () {
        selectRadio();
        initAll();
    });
    $("#select").change(function () {
        selectAll();
    });
    var params=null;
    function selectAll() {
        var param = Form.getParams($("#form"));
        var radioAll=document.getElementsByName('radios');
        var name=$("#select").val();
       // var name=null;
        var radioTrue="";
        var radioFalse="";
        for(var i=0;i<radioAll.length;i++){
            if(radioAll[i].checked == true){
                if(radioTrue==""){
                    radioTrue=radioTrue+radioAll[i].id;
                }else{
                    radioTrue=radioTrue+","+radioAll[i].id;
                }
            }else{
                if(radioFalse==""){
                    radioFalse=radioFalse+radioAll[i].id;
                }else{
                    radioFalse=radioFalse+","+radioAll[i].id;
                }
            }
        }
        param.true=radioTrue;
        param.false=radioFalse;
        param.name=name;
        $.ajax({
            "type": "post",
            "data": param,
            "url": "/network/supply/algorithm2/newData",
            "success":function(text){
                var all=JSON.parse(text);
                var d = all.data.Map1;
                var d1=all.data.Transport;
                var d2=all.data.Inventory;
                var d3=all.data.TransportInventory;
                //赋值
                $("#total").html(d1.data.length);
                $("#order").html(d1.totalOrder);
                $("#distance").html(d1.totalDistance);
                $("#cost").html("&yen;" + d1.totalCost);
                $("#vehicle").html(d1.totalVehicle);
                $("#renta").html("&yen;" + d1.renta);
                //运输成本赋值
                transport(d1.data);
                //运输成本赋值
                inventory(d2);
                //所有分析
                transportInventory(d3);
                //下拉选择框赋值
                var options1="";
                $("#select").append(options1);
                $("#select").empty();
                d.forEach(function (item, i) {
                    var name=item.name;
                    var options="<option value='"+name+"'>"+name+"</option>";
                    $("#select").append(options);
                })
                //给地图赋值
                if (all.success && d) {
                    showmap1(d);
                }
            }
        })
    }
    function selectRadio(){
        $.ajax({
            "type": "post",
            "data": params,
            "url": "/network/supply/algorithm2/radio",
            "success": function(text){
                var d = JSON.parse(text);
                if (d.success && d.data) {
                    $("#radios").empty();
                    $("#radios").append(options);
                    for(var i=0;i<d.data.radio.length;i++){
                        var primarySales=d.data.radio[i].name;
                        var options="<input type='checkbox' id='"+ d.data.radio[i].id +"' name='radios' >"+primarySales;
                        $("#radios").append(options);
                    }
                }
            }
        });
    }
</script>

<script type="text/javascript">


    function showmap1(d) {
        var myChart = echarts.init(document.getElementById('network-supply-algorithm-${uniqueId}'), 'macarons');
        var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
        var color = ['#a6c84c', '#ffa022', '#46bee9', '#D1E9B1', '#7DFF21'];
        var series = [];
        var legend = [];
        d.forEach(function (item, i) {
            legend.push(item.name);
            series.push({
                    name: item.name,
                    type: 'lines',
                    zlevel: 1,
                    effect: {
                        show: false,
                        period: 6,
                        trailLength: 0.7,
                        color: '#fff',
                        symbolSize: 3
                    },
                    label: {
                        normal: {
                            //  show: true,
                            //   position: 'right',
                            formatter: '{a}',
                            color:'#fff'
                        }
                    },
                    lineStyle: {
                        normal: {
                            color: color[i],
                            width: 0,
                            curveness: 0.2
                        }
                    },
                    data: item.res
                },
                {
                    name: item.name,
                    type: 'lines',
                    zlevel: 2,
                    symbol: ['none', 'arrow'],
                    symbolSize: 2,
                    effect: {
                        show: false,
                        period: 10,
                        trailLength: 0,
                        symbolSize: 1
                    },
                    label: {
                        normal: {
                            //   show: true,
                            //   position: 'right',
                            formatter: '{a}',
                            color:'#fff'
                        }
                    },
                    lineStyle: {
                        normal: {
                            color: color[i],
                            width: 1,
                            opacity: 0.6,
                            curveness: 0.2
                        }
                    },
                    data: item.res
                });
        });


        option = {
            backgroundColor: '#ffffff',
            title: {
                text: '配送中心分配情况',
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontFamily: '微软雅黑1'
                }
                , show: false
            },
            toolbox: {
                left: 'left',
                feature: {
                    restore: {},
                    saveAsImage: {}
                }
            },
            tooltip: {
                trigger: 'item'
            },
//                        legend: {
//                            orient: 'vertical',
//                            top: 'bottom',
//                            left: 'right',
//                            data: legend,
//                            textStyle: {
//                                color: '#fff'
//                            }
//                        },
            geo: {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#404a59'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            },
            series: series
        };
        myChart.setOption(option);
        document.getElementById("loading").style.display="none";
    }
    function transport(d) {
        //更新数据
        var option = cost_map.getOption();
        var mapData = [];
        var xData = [];
        var costData = [];
        var distanceData = [];
        var vehicleData = [];
        $.each(d, function (index, row) {
            mapData.push({name: row.name, value: [row.coordinateX, row.coordinateY, row.order]});
            xData.push(row.name);
            costData.push(row.cost);
            distanceData.push(row.distance);
            vehicleData.push(row.vehicle);
        });
        option.series[0].data = mapData;
        cost_map.setOption(option);

        option = cost_bar_one.getOption();
        option.xAxis = [
            {
                type: 'category',
                data: xData
            }
        ];
        option.series[0].data = costData;
        cost_bar_one.setOption(option);

        option = cost_bar_two.getOption();
        option.xAxis = [
            {
                type: 'category',
                data: xData
            }
        ];
        option.series[0].data = distanceData;
        cost_bar_two.setOption(option);

        option = cost_bar_three.getOption();
        option.xAxis = [
            {
                type: 'category',
                data: xData
            }
        ];
        option.series[0].data = vehicleData;
        cost_bar_three.setOption(option);
    }
    function inventory(d) {
        $("#safetyStock").text(d.safetyStock);
        $("#orderPort").text(d.orderPort);
        $("#turnoverInventory").text(d.turnoverInventory);
        $("#maxInventory").text(d.maxInventory);
        $("#eoq").text(d.eoq);
        $("#moneyLevel").text(d.moneyLevel);
        $("#avgInventory").text(d.avgInventory);
        $("#toSecondaryCenter").text(d.toSecondaryCenter);
    }
</script>

